<template>
  <li class="timeline-item">
    <div v-if="list.length > 1 ">
      <!--<div v-if="index !== list.length - 1" class="timeline-item__tail" />-->
      <div v-if="index === list.length - 1 || index === 0">

        <!--<div-->
          <!--v-if="!$slots.dot"-->
          <!--class="timeline-item__node"-->
          <!--:class="[-->
            <!--`timeline-item__node&#45;&#45;${size || ''}`,-->
            <!--`timeline-item__node&#45;&#45;${type || ''}`-->
          <!--]"-->
          <!--:style="{-->
            <!--backgroundColor: color-->
          <!--}"-->
        <!--&gt;-->
          <!--<i-->
            <!--v-if="icon"-->
            <!--class="timeline-item__icon"-->
            <!--:class="icon"></i>-->
        <!--</div>-->
      </div>
    </div>
    <div v-if="$slots.dot" class="timeline-item__dot">
      <slot name="dot" />
    </div>

    <div class="timeline-item__wrapper">
      <div
        v-if="hideTimestamp && placement === 'top'"
        class="timeline-item__timestamp is-top"
      >
        {{ timestamp }}
      </div>

      <div class="timeline-item__content">
        <slot />
      </div>

      <div
        v-if="hideTimestamp && placement === 'bottom'"
        class="timeline-item__timestamp is-bottom"
      >
        {{ timestamp }}
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: 'UserDefinedTimelineItem',

  inject: ['timeline'],

  props: {

    list: Array,

    timestamp: String,

    length: Number,

    hideTimestamp: {
      type: Boolean,
      default: false
    },

    placement: {
      type: String,
      default: 'bottom'
    },

    type: String,

    color: String,

    size: {
      type: String,
      default: 'normal'
    },

    icon: String,

    index: Number

  }
}
</script>

<style scoped>
  .timeline-item {position:relative;padding-bottom:20px}
  .timeline-item__wrapper {position:relative;padding-left:28px;top:-3px}
  .timeline-item__tail {position:absolute;left:4px;height:100%;top:21%;border-left:2px solid #001528}
  .timeline-item__icon {color:#FFF;font-size:16px}
  .timeline-item__node {top:20%;position:absolute;background-color:#001528;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  .timeline-item__node--normal {left:-1px;width:12px;height:12px}
  .timeline-item__node--large {left:-2px;width:14px;height:14px}
  .timeline-item__node--primary {background-color:#409EFF}
  .timeline-item__node--success {background-color:#67C23A}
  .timeline-item__node--warning {background-color:#E6A23C}
  .timeline-item__node--danger {background-color:#F56C6C}
  .timeline-item__node--info {background-color:#909399}
  .timeline-item__dot {position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  .timeline-item__content {color:#303133}
  .timeline-item__timestamp {color:#909399;line-height:1;font-size:13px}
  .timeline-item__timestamp.is-top {margin-bottom:8px;padding-top:4px}
  .timeline-item__timestamp.is-bottom {margin-top:8px}
</style>
